#app {
  height: 100%;
}
.ant-table {
  background: #fff;
}
.flex {
  display: flex;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex-x {
  display: flex;
  flex-direction: row;
}
.flex-y {
  display: flex;
  flex-direction: column;
}
.flex-x-start {
  justify-content: flex-start;
}
.flex-x-center {
  justify-content: center;
}
.flex-x-end {
  justify-content: flex-end;
}
.flex-x-between {
  justify-content: space-between;
}
.flex-x-around {
  justify-content: space-around;
}
.flex-y-start {
  align-items: flex-start;
}
.flex-y-center {
  align-items: center;
}
.flex-y-end {
  align-items: flex-end;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
.order3 {
  order: 3;
}

.fz76 {
  font-size: 76px;
}
.fz64 {
  font-size: 64px;
}
.fz60 {
  font-size: 60px;
}
.fz56 {
  font-size: 56px;
}
.fz48 {
  font-size: 48px;
}
.fz44 {
  font-size: 44px;
}
.fz40 {
  font-size: 40px;
}
.fz38 {
  font-size: 38px;
}
.fz36 {
  font-size: 36px;
}
.fz34 {
  font-size: 34px;
}
.fz32 {
  font-size: 32px;
}
.fz30 {
  font-size: 30px;
}
.fz28 {
  font-size: 28px;
}
.fz26 {
  font-size: 26px;
}
.fz24 {
  font-size: 24px;
}
.fz20 {
  font-size: 20px;
}
.fz16 {
  font-size: 16px;
}

.bold {
  font-weight: 700;
}
.bold500 {
  font-weight: 500;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pt30 {
  padding-top: 30px;
}
.pt40 {
  padding-top: 40px;
}
.pt50 {
  padding-top: 50px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb40 {
  padding-bottom: 40px;
}
.pb50 {
  padding-bottom: 50px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mt60 {
  margin-top: 60px;
}
.mt70 {
  margin-top: 70px;
}
.mt80 {
  margin-top: 80px;
}
.mt100 {
  margin-top: 100px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb60 {
  margin-bottom: 60px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.ml40 {
  margin-left: 40px;
}
.ml50 {
  margin-left: 50px;
}
.ml60 {
  margin-left: 60px;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mr40 {
  margin-right: 40px;
}
.mr50 {
  margin-right: 50px;
}
.mr60 {
  margin-right: 60px;
}

.bdr4 {
  border-radius: 4px;
}
.bdr8 {
  border-radius: 8px;
}
.bdr10 {
  border-radius: 10px;
}
.bdr12 {
  border-radius: 12px;
}
.bdr16 {
  border-radius: 16px;
}
.bdr20 {
  border-radius: 20px;
}
.bdr-circle {
  border-radius: 50%;
}

.fff {
  color: #fff;
}
.t-c {
  text-align: center;
}
.t-l {
  text-align: left;
}
.t-r {
  text-align: right;
}

@cyan: #2db7f5;
@green: #52c41a;
@red: #f5222d;
@orange: #fa8c16;
/* 新增按钮颜色 */
body {
  .per100 {
    width: 100%;
  }
  .ant-btn-cyan {
    color: #fff;
    background: @cyan;
    border-color: @cyan;
    &:hover,
    &:focus {
      color: #fff;
      border-color: @cyan;
      background: fadeout(@cyan, 20%);
    }
  }

  .ant-btn-success {
    color: #fff;
    background: @green;
    border-color: @green;
    &:hover,
    &:focus {
      color: #fff;
      border-color: @green;
      background: fadeout(@green, 20%);
    }
  }

  .ant-btn-danger {
    color: #fff;
    background: @red;
    border-color: @red;
    &:hover,
    &:focus {
      color: #fff;
      border-color: @red;
      background: fadeout(@red, 20%);
    }
  }

  .ant-btn-orange {
    color: #fff;
    background: @orange;
    border-color: @orange;
    &:hover,
    &:focus {
      color: #fff;
      border-color: @orange;
      background: fadeout(@orange, 20%);
    }
  }

  .ant-select {
    vertical-align: top;
  }
}

